<template>
  <el-card class="box-card">
    <el-steps :active="active" finish-status="success" align-center space="200px" style="justify-content: center; margin-top: 15px">
      <el-step title="选择网格" />
      <el-step title="选择AQI" />
      <el-step title="确认提交" />
    </el-steps>

    <!-- 选择网格的card -->
    <div class="gridContainer" v-if="active == 0">
      <el-card shadow="hover" class="selectGrid">
        <template #header>
          <div class="card-header">
            <span>选择网格</span>
          </div>
        </template>
        <!-- 网格表单 -->
        <el-form :inline="true" :model="formSubmit" class="demo-form-inline" :label-width="labelWidth1">
          <AddressSelect @selectChanged="selectChanged" :initvalue="formSubmit" :labelWidth="labelWidth" :selectWidth="selectWidth" />
          <el-form-item label="地址">
            <el-input v-model="formSubmit.address" placeholder="具体地址" clearable />
          </el-form-item>
          <el-form-item>
            <div class="btntoAQI">
              <el-button type="primary" @click="toAQI">下一步</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 选择AQI的card -->
    <div class="aqiContainer" v-if="active == 1">
      <el-card shadow="hover" class="selectAqi">
        <!-- AQI表格 -->
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
          <el-table-column prop="level" label="AQI等级" width="100" />
          <el-table-column prop="category" label="AQI类别" width="100" />
          <el-table-column prop="aqiExplain" label="描述" />
        </el-table>
        <el-form :inline="true" :model="formSubmit" labelWidth="150px">
          <!-- AQI表单 -->
          <el-form-item label="请预估当前AQI等级：" style="margin-top: 20px">
            <el-radio-group v-model="formSubmit.estimatedGrade">
              <el-row>
                <el-col :span="4" v-for="item in tableData" :key="item.level">
                  <el-radio :label="item.level" border>{{ item.level }}级</el-radio>
                </el-col>
              </el-row>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="请填写反馈信息：">
            <el-input v-model="formSubmit.info" maxlength="30" placeholder="请填写反馈信息" show-word-limit type="textarea" style="width: 460px" />
          </el-form-item>
          <el-form-item>
            <div class="btntoAQI">
              <el-button type="primary" @click="togrid">上一步</el-button>
              <el-button type="primary" @click="toConfirm">下一步</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 确认提交 -->
    <div class="allContainer" v-if="active == 2">
      <div class="comfirm">
        <el-descriptions title="确认待反馈信息" :column="1" border>
          <el-descriptions-item label="省份" label-align="right" align="center" width="200px">
            {{ grid.province.provienceName ? grid.province.provienceName : '' }}
          </el-descriptions-item>
          <el-descriptions-item label="城市" label-align="right" align="center">
            {{ grid.city.city ? grid.city.city : '' }}
          </el-descriptions-item>
          <el-descriptions-item label="地址" label-align="right" align="center">
            {{ formSubmit.address ? formSubmit.address : '' }}
          </el-descriptions-item>
          <el-descriptions-item label="AQI等级" label-align="right" align="center">
            {{ getAQILabel(formSubmit.estimatedGrade) }}
          </el-descriptions-item>
          <el-descriptions-item label="描述信息" label-align="right" align="center">
            {{ formSubmit.info ? formSubmit.info : '' }}
          </el-descriptions-item>
        </el-descriptions>
        <div class="btnCom">
          <el-button type="primary" @click="togrid">上一步</el-button>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import $axios from '../utils/axios'
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'
import AddressSelect from './addressSelect.vue'
import { ElMessage } from 'element-plus'

// 步骤条
const active = ref(0)

const togrid = () => {
  active.value--
}

const toAQI = () => {
  if (active.value === 0) {
    if (!grid.value.province.provienceName.trim()) {
      ElMessage.warning('省份不能为空')
    } else if (!grid.value.city.city.trim()) {
      ElMessage.warning('城市不能为空')
    } else if (!formSubmit.value.address.trim()) {
      ElMessage.warning('地址不能为空')
    } else {
      active.value++
    }
  }
}

const toConfirm = () => {
  if (active.value === 1) {
    if (formSubmit.value.estimatedGrade) {
      active.value++
    } else {
      ElMessage.warning('请选择AQI等级')
    }
  }
}

// 获取当前反馈日期和时间
function dateFormat() {
  var now = new Date()
  var year = now.getFullYear()
  var month = now.getMonth() + 1 < 10 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1
  var day = now.getDate() < 10 ? '0' + now.getDate() : now.getDate()
  var hour = now.getHours() < 10 ? '0' + now.getHours() : now.getHours()
  var minute = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()
  var second = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds()
  formSubmit.value.fDate = year + '-' + month + '-' + day
  formSubmit.value.fTime = hour + ':' + minute + ':' + second
}

const labelWidth1 = '80px'
let selectWidth = '120px'
let labelWidth = '80px'

// 表单数据
const formSubmit = ref({
  address: '',
  estimatedGrade: '',
  info: ''
})

// -----------选择网格部分--------------------------
// 获得省市区组件传回的值
const grid = ref({
  province: { id: '', provienceName: '', shortName: '' },
  city: { id: '', city: '', provienceId: '' }
})

const selectChanged = (f) => {
  grid.value = f
  formSubmit.value.pId = grid.value.province.id
  formSubmit.value.cId = grid.value.city.id
}

// -----------选择AQI部分--------------------------
const tableData = ref([
  { level: '一', category: '优', aqiExplain: '空气质量令人满意，基本无空气污染', label: '一级' },
  { level: '二', category: '良', aqiExplain: '空气质量可接受，但某些污染物可能对极少数异常敏感人群健康有较弱影响', label: '二级' },
  { level: '三', category: '轻度污染', aqiExplain: '易感人群症状有轻度加剧，健康人群出现刺激症状', label: '三级' },
  { level: '四', category: '中度污染', aqiExplain: '进一步加剧易感人群症状，可能对健康人群心脏、呼吸系统有影响', label: '四级' },
  { level: '五', category: '重度污染', aqiExplain: '心脏病和肺病患者症状显著加剧，运动耐受力降低，健康人群普遍出现症状', label: '五级' },
  { level: '六', category: '严重污染', aqiExplain: '健康人群运动耐受力降低，有明显强烈症状，提前出现某些疾病', label: '六级' }
])

// 自定义AQI表格样式
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex === 0) {
    return 'good-row'
  } else if (rowIndex === 1) {
    return 'fine-row'
  } else if (rowIndex === 2) {
    return 'light-row'
  } else if (rowIndex === 3) {
    return 'medium-row'
  } else if (rowIndex === 4) {
    return 'serious-row'
  } else if (rowIndex === 5) {
    return 'heavy-row'
  }
  return ''
}

const router = useRouter()

const getAQILabel = (level) => {
  const item = tableData.value.find(item => item.level === level)
  return item ? item.label : ''
}

// 中文数字到阿拉伯数字的映射
const chineseToArabic = {
  一: 1,
  二: 2,
  三: 3,
  四: 4,
  五: 5,
  六: 6
}

// -----------提交表单数据----------
const sId = sessionStorage.getItem('id')
const onSubmit = async () => {
  // 获取当前日期和时间
  const year = new Date().getFullYear()
  const month = ('0' + (new Date().getMonth() + 1)).slice(-2)
  const day = ('0' + new Date().getDate()).slice(-2)
  const hour = ('0' + new Date().getHours()).slice(-2)
  const minute = ('0' + new Date().getMinutes()).slice(-2)
  const second = ('0' + new Date().getSeconds()).slice(-2)
  formSubmit.value.fDateTime = year + '-' + month + '-' + day + 'T' + hour + ':' + minute + ':' + second

  dateFormat()
  formSubmit.value.sId = sId

  // 转换 estimatedGrade 为阿拉伯数字
  formSubmit.value.estimatedGrade = chineseToArabic[formSubmit.value.estimatedGrade]

  const path = '/api/supervisor/feedbackAdd'
  const { data: res } = await $axios.post(path, formSubmit.value)
  if (res.code === 200) {
    ElNotification({
      title: '成功',
      message: '反馈成功！',
      type: 'success'
    })
  } else if (res.code === 101) {
    ElNotification({
      title: '失败',
      message: '未知原因，反馈失败！',
      type: 'error'
    })
  }
  router.push('/HistoryReportList')
}
</script>

<style>
.box-card {
  width: 99%;
  height: 95%;
  margin-top: 12px;
  border-radius: 12px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.gridContainer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.selectGrid {
  width: 400px;
  margin-top: 100px;
  align-items: center;
}

.btntoAQI {
  margin-left: 150px;
}

.aqiContainer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.selectAqi {
  width: 700px;
  margin-top: 20px;
  align-items: center;
}

.allContainer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.comfirm {
  width: 400px;
  margin-top: 30px;
  align-items: center;
}

.btnCom {
  margin-top: 20px;
  margin-left: 120px;
}

/* 一级 绿色 */
.el-table .good-row {
  /* --el-table-tr-bg-color: #67C23A; */
  color: #67c23a;
}

/* 二级 黄色 */
.el-table .fine-row {
  /* --el-table-tr-bg-color: #FFFF00; */
  color: #ffff00;
}

/* 三级 橙色 */
.el-table .light-row {
  /* --el-table-tr-bg-color: #FFA500; */
  color: #ffa500;
}

/* 四级 红色 */
.el-table .medium-row {
  /* --el-table-tr-bg-color: #FF0000; */
  color: #ff0000;
}

/* 五级 紫色 */
.el-table .serious-row {
  /* --el-table-tr-bg-color: #800080; */
  color: #800080;
}

/* 六级 红褐色 */
.el-table .heavy-row {
  /* --el-table-tr-bg-color: #800000; */
  color: #800000;
}
</style>
